<template>
	<view>
		<u-navbar :is-fixed="false" back-icon-color="#fff" :back-text-style="{color:'#fff'}" :border-bottom="false"
			:is-back="false" back-text="消防检测" :background="{ background:'#357BED'}">
			<view class="nav-txt-left text-white">
				安全云平台
			</view>
		</u-navbar>

		<view class="top">
			<view class="flex-between" style="background-color: #357BED;padding: 40rpx;">
				<view class="flex-center top-txt">
					<image :src="wxInfo.avatarUrl" mode=""></image>
					<text class="text-white">{{userInfo.userName}}</text>
				</view>
				<text class="text-white">安全监测</text>
			</view>
			<view class="" style="height: 130rpx;"></view>

			<view class="data">
				<view class="flex-left data-con">
					<view class="data-item">
						<view style="font-size:40rpx;color:#ED4048">0</view>
						<view class="">安全报警</view>
					</view>
					<view class="data-item">
						<view style="font-size:40rpx;color:#F8B128">{{XQueryNum.Table[0].YcNum || 0}}</view>
						<view class="">设备异常</view>
					</view>
					<view class="data-item">
						<view style="font-size:40rpx;color:#337BF1">{{XQueryNum.Table1[0].YjNum || 0}}</view>
						<view class="">安全预警</view>
					</view>
				</view>
			</view>



		</view>

		<view class="title">
			<view style="border-bottom: solid 1px #F1F1F1;padding: 12rpx 0;">
				<u-icon name="trash-fill" color="#2979ff" size="40"></u-icon>
				<text class="txt">安全应用</text>
			</view>
		</view>


		<view style="padding: 0 26rpx;background-color: white;">
			<u-grid :col="4" :border="false">
				<u-grid-item @click="go(item)" v-for="item in funArr" :key="item.id">
					<u-avatar :src="item.src" mode="square"></u-avatar>
					<!-- <image class="icon" :src="item.src" mode=""></image> -->
					<view class="grid-text">{{item.text}}</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view style="padding:20rpx 40rpx 12rpx;">
			<image style="width: 100%;" src="../../static/banner.png" mode="widthFix"></image>
		</view>

		<view class="title">
			<view style="padding: 16rpx 0;">
				<u-icon name="volume-up-fill" color="#2979ff" size="40"></u-icon>
				<text class="txt">报警消息</text>
				<view style="float: right;">
					<text style="color: #909399;">更多</text>
					<u-icon name="arrow-right" color="#909399" size="26"></u-icon>
				</view>
			</view>
		</view>
		
		<u-modal v-model="show" :content="content"></u-modal>

		<view class="" style="height: 40rpx;"></view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show:false,
				content:'',
				userInfo: '',
				wxInfo: {},
				funArr: [{
						src: require('../../static/img/icon1.jpg'),
						text: '室内地图',
						id: 1,
						pageUrl: '../inDoorMap/index'
					},
					{
						src: require('../../static/img/icon2.jpg'),
						text: '安全检查',
						id: 2,
						pageUrl: '../warning/securityCheck'
					},
					{
						src: require('../../static/img/icon3.jpg'),
						text: '每日巡检',
						id: 3,
						pageUrl: '../warning/everydayCheck'
					},
					{
						src: require('../../static/img/icon4.jpg'),
						text: '设备信息',
						id: 4,
						pageUrl: '../deviceInfor/index'
					},

					{
						src: require('../../static/img/icon12.jpg'),
						text: '设备日志',
						id: 5,
						pageUrl: './log'
					},
					{
						src: require('../../static/img/icon6.jpg'),
						text: '检查确认',
						id: 6,
						pageUrl: '../warning/checkSure'
					},
					{
						src: require('../../static/img/icon7.jpg'),
						text: '巡检确认',
						id: 7,
						pageUrl: '../warning/pollingSure'
					},
					{
						src: require('../../static/img/icon8.jpg'),
						text: '统计分析',
						id: 8,
						pageUrl: '../../pagesA/list/index'
					},
					{
						src: require('../../static/img/icon9.jpg'),
						text: '防雷监测',
						id: 9,
						pageUrl: '../protection/index'
					},
					{
						src: require('../../static/img/icon10.jpg'),
						text: '接地电阻',
						id: 10,
						pageUrl: '../resistance/index'
					},
					{
						src: require('../../static/img/icon11.jpg'),
						text: '峰值记录',
						id: 11,
						pageUrl: '../lightning/index'
					},
					{
						src: require('../../static/img/icon5.jpg'),
						text: '雷电预警',
						id: 12,
						pageUrl: '../protection/lightningWarning'
					},
					// {
					// 	src: require('../../static/img/icon10.jpg'),
					// 	text: '安防',
					// 	id: 13,
					// 	pageUrl:'../resistance/index's
					// },
					// {
					// 	src: require('../../static/img/icon11.jpg'),
					// 	text: '消防',
					// 	id: 14,
					// 	pageUrl:'../lightning/index'
					// },
					// {
					// 	src: require('../../static/img/icon12.jpg'),
					// 	text: '安全用电',
					// 	id: 15,
					// 	pageUrl:'./log'
					// },
				],
				XQueryNum:{}

			}
		},
		computed: {},
		methods: {
			go(obj) {
				if (!obj.pageUrl) {
					return
				}
				uni.navigateTo({
					url: obj.pageUrl
				})
			},
			//获取数据
			getDataNum() {
				this.$axios.post('Device/XQueryNum',this.userInfo, p => {
					if(p.code==0){
						this.XQueryNum=JSON.parse(p.data)
						this.content=`您当前有 ${this.XQueryNum.Table[0].YcNum}个设备异常，${this.XQueryNum.Table1[0].YjNum}预警数`
						this.show=true
					}else{
						this.content=`您当前有0个设备异常，0预警数`
					}
				})
			}
		},
		onLoad(option) {
			this.userInfo = this.$util.getUserInfo()
			this.wxInfo=JSON.parse(uni.getStorageSync('wxInfo'));
			this.getDataNum()
		},
		onReady() {

		},
		onShow() {
			
		}


	}
</script>

<style lang="scss">
	.top {
		position: relative;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			margin-right: 30rpx;
		}

		.data {
			padding: 0 40rpx;
			position: absolute;
			width: 100%;
			bottom: 20rpx;

			.data-con {
				height: 140rpx;
				background-color: white;
				border-radius: 10rpx;

				.data-item {
					flex: 1;

					view {
						text-align: center;
					}
				}
			}
		}
	}


	.title {
		padding: 0 40rpx;
		background-color: white;

		.txt {
			font-weight: 600;
			font-size: 32rpx;
			color: black;
			margin-left: 10rpx;
		}
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		// color: black;
		color: #606266;
	}
</style>
